<template>
	<view class="box">
		<view class="status_bar">
			<view class="top_view">
				<text class="iconfont icon-xiazai6" @tap="fanhui()"></text>
				<text>详细信息</text>
				<text @tap="jumpp()">跳过</text>
			</view>
		</view>
		<view class="item">
			<view class="title">签名</view>
			<view>
				<input type="text" value="" placeholder="好看的皮囊千篇一律,有趣的灵魂万里挑一" maxlength="10" />
				<!-- <i class="iconfont icon-youjiantou"></i> -->
			</view>
		</view>
		<view class="item">
			<view class="title">居住地</view>
			<view @tap="dizhi()">
				<input type="text" value="" placeholder="湖北  武汉" />
				<i class="iconfont icon-youjiantou"></i>
			</view>
		</view>
		<view class="item">
			<view class="title">爱好</view>
			<view @tap="aihao()">
				<input type="text" value="" placeholder="打球、电玩、直播、音乐" />
				<i class="iconfont icon-youjiantou"></i>
			</view>
		</view>
		<view class="item">
			<view class="title">职业</view>
			<view>
				<picker @change="bindzhiyeChange" :value="indexzhiye" :range="zhiye">
					<view>
						<input type="text" :value="zhiye[indexzhiye]" placeholder="工程师" maxlength="10" />
						<i class="iconfont icon-youjiantou"></i>
					</view>
				</picker>
			</view>
		</view>
		<view class="item">
			<view class="title">情感状态</view>
			<view>
				<picker @change="bindqingganChange" :value="indexqinggan" :range="qinggan">
					<view>
						<input type="text" :value="qinggan[indexqinggan]" placeholder="单身" maxlength="10" />
						<i class="iconfont icon-youjiantou"></i>
					</view>
				</picker>
			</view>
		</view>
		<view class="item">
			<view class="title">交友目的</view>
			<view>
				<picker @change="bindjiaoyouChange" :value="indexjiaoyou" :range="jiaoyou">
					<view>
						<input type="text" :value="jiaoyou[indexjiaoyou]" placeholder="情侣" maxlength="10" />
						<i class="iconfont icon-youjiantou"></i>
					</view>
				</picker>
			</view>
		</view>
		<button type="primary" class="btn" @tap="jump()">下一步</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 职业
			zhiye: ['医生', '程序员', '护士', '教师', '厨师', 'HR'],
			indexzhiye: 0,
			// 情感
			qinggan: ['单身', '非单身'],
			indexqinggan:0,
			// 交友目的
			jiaoyou: ['脱单', '暴富'],
			indexjiaoyou:0,
			
		};
	},
	methods: {
		fanhui() {
			uni.navigateBack({
				delta: 1
			});
		},
		jumpp() {
			uni.navigateTo({
				url: '../zhuce/touxiang'
			});
		},
		jump() {
			uni.navigateTo({
				url: '../zhuce/touxiang'
			});
		},
		aihao() {
			uni.navigateTo({
				url: '../diquxuanze/aihao'
			});
		},
		dizhi() {
			uni.navigateTo({
				url: '../diquxuanze/dizhi'
			});
		},
		//职业
		bindzhiyeChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.indexzhiye = e.target.value;
		},
		//情感
		bindqingganChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.indexqinggan = e.target.value;
		},
		//交友
		bindjiaoyouChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.indexjiaoyou = e.target.value;
		}
	}
};
</script>

<style lang="less">
page {
	width: 100%;
	height: 100%;
	.box {
		font-family: PingFang SC;
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #1f1e24;
		.status_bar {
			box-sizing: border-box;
			/* // 自定义状态栏高度 */
			height: var(--status-bar-height);
			position: relative;
			height: 88upx;
			// transparent
			background-color: #fff;
			.top_view {
				box-sizing: border-box;
				background-color: #1f1e24;
				height: 88upx;
				padding: 0 30upx;
				// padding-top: calc(25upx + var(--status-bar-height));
				width: 100%;
				position: fixed;
				top: 0;
				z-index: 999;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// font-size: 36upx;
				color: #fff;
				text:nth-child(1) {
					font-size: 37upx;
				}
				text:nth-child(2) {
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(252, 250, 241, 1);
				}
				text:nth-child(3) {
					font-size: 37upx;
					font-size: 30upx;
					font-weight: 500;
					color: rgba(255, 224, 147, 1);
				}
			}
		}
		.item {
			padding: 0 45upx;
			margin-top: 30upx;
			& > view:nth-child(1) {
				color: rgba(255, 224, 147, 1);
				font-size: 30upx;
			}
			& > view:nth-child(2) {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28upx;
				height: 72upx;
				background-color: rgba(242, 242, 242, 0.1);
				margin-top: 21upx;
				input {
					flex: 1;
					padding: 0 10upx;
					color: #999999;
					font-size: 28upx;
				}
				i {
					color: #999999;
					margin-left: 15upx;
					margin-right: 15upx;
				}
			}
			& > view:nth-child(2) {
				picker {
					width: 100%;
					view {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28upx;
						height: 72upx;
						input {
							flex: 1;
							padding: 0 10upx;
							color: #999999;
						}
						i {
							color: #999999;
							margin-left: 15upx;
							margin-right: 15upx;
						}
					}
				}
			}
		}
		.btn {
			width: 635upx;
			height: 88upx;
			background: rgba(255, 224, 147, 1);
			border-radius: 0;
			position: absolute;
			bottom: 37upx;
			color: rgba(31, 30, 36, 1);
			font-size: 32upx;
			line-height: 88upx;
			margin-left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>
